AWS Amplify で認証中のユーザー情報を取得・表示してみた

#AWS Amplify
#AWS
いわさ
2024.09.11
いわさです。
先日カスタム属性を含めて AWS Amplify Gen2 での認証周りを実装しました。
https://dev.classmethod.jp/articles/amplify-user-custom-attr/
今回はユーザー情報をアプリケーション側で表示したり、あるいは何か判断して制御するために、サインイン中のユーザー情報を取得してみたいと思います。

取得方法はいくつかあって、 今回はそれぞれを React + Next.js のクイックスタートアプリで組み込んで試してみました。
 getCurrentUser を使うまずひとつめはgetCurrentUserを使って取得する方法です。

GetCurrentUserOutputオブジェクトを取得出来まして、ユーザーID・ユーザー名・認証フロー・ログインID くらいまでであればこれで取得可能です。
<ドキュメント>
import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { getCurrentUser, GetCurrentUserOutput } from 'aws-amplify/auth';
import { useEffect, useState } from "react";

function App() {
  const [user, setUser] = useState<GetCurrentUserOutput>();
  const getCurrentUserAsync = async () => {
    const result = await getCurrentUser();
    setUser(result);
  };

  useEffect(() => {
    getCurrentUserAsync();
  }, []);

  const formFields = {
    signUp: {
      "custom:tenant_id": {
        label: 'Hoge Tenant',
        order: 1
      }
    }
  };

  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => (
        <main>
          <div>
            <p>userId: {user?.userId}</p>
            <p>username: {user?.username}</p>
            <p>authFlowType: {user?.signInDetails?.authFlowType}</p>
            <p>loginId: {user?.signInDetails?.loginId}</p>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;
実行してみるとこんな感じで取得されます。
 fetchUserAttributes を使う続いてはfetchUserAttributesを使う方法です。

ユーザー属性を取得してくれます。
https://docs.amplify.aws/react/build-a-backend/auth/connect-your-frontend/manage-user-attributes/
:
import { FetchUserAttributesOutput, fetchUserAttributes } from 'aws-amplify/auth';
import { useEffect, useState } from "react";

function App() {
  const [attr, setAttrResult] = useState<FetchUserAttributesOutput>();
  const getCurrentUserAsync = async () => {
    const result = await fetchUserAttributes();
    console.log(result);
    setAttrResult(result);
  };

  useEffect(() => {
    getCurrentUserAsync();
  }, []);

:

  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => (
        <main>
          <div>
          <p>email: {attr?.email}</p>
          <p>all: {JSON.stringify(attr)}</p>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;
こんな感じでして、先程よりも多くのユーザー属性が取得出来ています。

先ほどはカスタム属性は取得されていなかったのですが、こちらではカスタム属性まで取得出来ています。
一方で認証フローなどは取得出来ていませんでしたが、おおよそ同じかそれ以上の情報が取得できるので基本的にはこちらを使うのが良さそうだと感じました。
 fetchAuthSession を使う最後にfetchAuthSessionを使う方法です。

こちらは ID トークンやアクセストークンを直接取得します。
JWT の解析が必要にはなるのですが、先程の２つの方法以上にトークン情報が必要な場合（クライアント ID が必要とか）についてはこちらの方法が利用可能です。
:

import { AuthSession, fetchAuthSession } from 'aws-amplify/auth';
import { useEffect, useState } from "react";

function App() {
  const [session, setSessionResult] = useState<AuthSession>();
  const getCurrentUserAsync = async () => {
    const result = await fetchAuthSession();
    setSessionResult(result);
  };

  useEffect(() => {
    getCurrentUserAsync();
  }, []);

:

  return (
    <Authenticator formFields={formFields}>
      {({ signOut }) => (
        <main>
          <div>
          <p>idtoken: {session?.tokens?.idToken?.toString()}</p>
          <p>accesstoken: {session?.tokens?.accessToken.toString()}</p>
          </div>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;
ちょっとわかりにくいのですがtoStringで画面表示させるとこんな感じになります。

クレームにアクセスさせるためにはもうひと手間必要ですね。
 さいごに本日は AWS Amplify で認証中のユーザー情報を取得・表示してみた。
Gen2 に依存しない部分なので以前からの手法と変わらないとは思うのですが、Gen2 のドキュメントで改めて記載されていたので再確認がてらそれぞれの方法を試してみました。
ログイン中のユーザー情報を画面表示したいケースは多いので活用してみたいと思います。